<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考生信息转换</title>
    <!-- vue -->
    <script src="/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header><h2>欢迎使用</h2></el-header>
        <el-main>
            <el-upload
                    v-loading="loading"
                    element-loading-text="正在生成，请稍后.."
                    ref="upload"
                    class="upload-demo"
                    drag
                    show-file-list="false"
                    accept=".xls,.xlsx"
                    action="/uploadAndRead"
                    :on-progress="progress"
                    :on-success="success"
                    limit="1"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
            </el-upload>
        </el-main>
        <el-main>
            <h4>说明</h4>
            <p>1.Excel列名需和所提供的模板匹配，否则将解析不到数据</p>
            <p>2.姓名与身份证号为空的考生无法生成PDF</p>
            <p>3.由于提供模板的Excel数据与准考证数据不完全匹配，目前暂且实现姓名、准考证号、身份证号的动态生成</p>
            <p>4.准考证号默认为7位（当前日期+序号），当单个文件的数据量超过1000条，准考证会超过7位（可优化）</p>
            <p>5.后台解析数据完成后会以zip文件形式返回，将打开新的窗口下载，若浏览器拦截，请允许并忽略</p>
            <p>6.由于某些原因，响应时间可能存在波动，大约在2s以内</p>
            <p>7.目前界面十分简单，若有其他需求，可详谈</p>
        </el-main>
    </el-container>

</div>
</body>
</html>
<style>
    .el-container{
        margin:0 auto;
    }
    .el-header{
        margin:0 auto;
    }
    .el-main{
        margin:0 auto;
    }
    .el-upload{
        text-align: center;
    }
    body {
        margin: 0;
    }
</style>
<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            loading: false
        },
        methods: {
            progress: function(file){
                this.loading = true
            },
            success: function (res, file, fileList){
                this.$refs.upload.clearFiles();
                if(res.code === 200){
                    this.loading = false
                    this.$notify({
                        title: '解析成功',
                        message: '下载中...',
                        position: 'bottom-right',
                        type: 'success',
                        duration: 2000
                    });
                    window.open("/getZip/"+res.data)
                }else {
                    this.loading = false
                    if (res.code === 500){
                        this.$notify.error({
                            title: 'PDF生成失败',
                            message: '模板文件不匹配或数据不完整',
                            position: 'bottom-right',
                            duration: 0
                        });
                    }else if(res.code === 501){
                        this.$notify.error({
                            title: '压缩文件失败',
                            message: '系统错误，请联系管理员',
                            position: 'bottom-right',
                            duration: 0
                        });
                    }
                }

            },

        }
    })
</script>